<template>
  <div id="background">
      <!--头部图片-->
    <div class="col-12 m-0 p-0" >
      <img src="/static/img/MemberLogo.png" class="img-responsive center-block" height="210" width="100%">
    </div>
    <!--中间的二维码和积分-->
    <div class="container-fluid">
      <div class="card mt-3" >
        <div class="card-body ">
          <div class="col-12 mt-3 mb-3">
            <img src="static/img/getMember.png" width="100%" height="200px" class="rounded">
          </div>
          <!--积分和余额-->
          <div>
            <table id="Member_jifen" align="center" class="" cellspacing="20"  >
              <tr align="center" style="width: 100%">
                <td align="left" style="text-align: center"> <span ><i class="bi bi-star-fill"></i></span></td>
                <td style="padding-right: 60px">&nbsp;积分<br>{{score}}</td>
                <td rowspan="5" align="center"> <span><i class="bi bi-currency-yen"></i></span></td>
                <td>&nbsp;余额<br>{{ balance }}</td>
              </tr>
            </table>
          </div>

        </div>
      </div>
    </div>

    <!--底部会员列表-->
    <div class="container-fluid">
      <div class="card mt-2" >
        <div class="card-body m-0 p-0">
          <table class="table" >
            <tr  align="left" >
              <td colspan="2"><i class="bi bi-person-square h5"></i>会员中心</td>
              <td align="right"> <span><i class="fa fa-chevron-right"></i></span></td>
            </tr>

            <tr align="left" @click="$router.push('/MyInformation')" style="border-top-color:#F6F6F6">
              <td colspan="2"><span><i class="bi bi-card-list h5"></i></span>我的资料</td>
              <td align="right"><span><i class="fa fa-chevron-right"></i></span></td>
            </tr>

            <tr  align="left" style="border-top-color:#F6F6F6">
              <td colspan="2"><i class="bi bi-bookmark-dash h5"></i>会员权益</td>
              <td align="right"><span><i class="fa fa-chevron-right"></i></span></td>
            </tr>

            <tr align="left" style="border-top-color:#F6F6F6">
              <td colspan="2"><span><i class="zi zi_handholdingusd"></i></span> 在线充值</td>
              <td align="right"><span><i class="fa fa-chevron-right"></i></span></td>
            </tr>

            <tr align="left" style="border-top-color:#F6F6F6" v-on:click="exit">
              <td colspan="2"><span><i class="bi bi-people h5"></i></span>账号切换</td>
              <td align="right"><span><i class="fa fa-chevron-right"></i></span></td>
            </tr>

          </table>
        </div>
      </div>
    </div>

    <br><br><br>

    <div>
      <BottomNavigation></BottomNavigation>
    </div>

  </div>



</template>

<script>
import service from "@/utils/axios";
export default {
  name: "MemberCenter",
  data(){
    return {
      id: 0,
      score: 0,
      balance: 0
    }
  },
  methods: {
    exit: function (){
      if (confirm("确定退出吗？")){
        service.post("/exit",{
          id: this.id
        }).then(data => {
          this.$router.push("/")
        });
      }
    },

  },
  created() {
    service.get("/queryById").then(data => {
      this.id = data.data.data.score
      this.score = data.data.data.score
      this.balance = data.data.data.balance
    })
  }
}
</script>

<style scoped>
#background{
  background-color: #F6F6F6;
}


#Member_jifen .bi-star-fill {

  z-index: 2;
  font-size: 20px;
  text-align: center;
  color: #F6F6F6;

}

/*
边框样式设置
 */
#Member_jifen span{

  background-color: #CB1223;
  border-radius:50%;
  border:1px solid #CB1223;width:33px;height:33px;display:block;z-index: 3
}
/*
图标样式设置
 */
#Member_jifen .bi-currency-yen {
  z-index: 2;
  font-size: 24px;
  text-align: center;
  color: #F6F6F6;

}
.zi{
  font-size: 18px;
}
</style>

